<template>
  <div>
    <van-cell @click="searchSuggestion(item)" v-for="item in suggestionList" :key="item" icon="search">
      <!-- 使用插槽，使用v-html对数据进行渲染 -->
      <div slot="title" v-html="formatStr(item)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestion } from '@/api/search.js'
import { debounce } from 'lodash'
export default {
  name: 'suggestion',
  data () {
    return {
      isShow: true,
      suggestionList: []// 搜索建议列表数据
    }
  },
  props: {
    value: {
      type: String,
      required: true
    }
  },
  methods: {
    // 获取搜索建议列表数据
    async getSearchSuggestionList () {
      try {
        const res = await getSearchSuggestion(this.value)
        // console.log(res)
        // 请求成功，保存数据
        this.suggestionList = res.data.data.options
      } catch (err) {
        this.$toast('获取失败')
      }
    },
    // 过滤数据
    formatStr (item) {
      // 动态生成正则表达式
      const reg = new RegExp(this.value, 'gi')
      // 根据正则表达式进行匹配替换
      return item.replace(reg, '<span style="color:red">' + this.value + '</span>')
    },
    // 点击搜索建议，显示搜索结过
    searchSuggestion (item) {
      this.$emit('search', item)
    }
  },
  computed: {},
  watch: {
    value: {
      // handler () {
      //   clearTimeout(this.timer)
      //   this.timer = setTimeout(() => {
      //     console.log('zzz')
      //   }, 900)
      // },
      // 用lodash的debounce进行防抖
      handler: debounce(function (newVal) {
        // 如果isShow为false，则组件销毁了，虽然定时器还在走，但是return出去，不会执行后面发起请求的方法
        if (!this.isShow) return
        // console.log('zzzz')
        this.getSearchSuggestionList()
      }, 900),
      // 首次也会触发
      immediate: true
    }
  },
  filters: {},
  components: {},
  created () { },
  mounted () { },
  beforeDestroy () {
    // 组件销毁前把isShow改为false
    this.isShow = false
  }
}
</script>

<style scoped lang='less'>
</style>
